// 新碟滚动列表样式
.n-new {
  margin-top: 35px;
  .n-dist {
    position: relative;
    height: 186px;
    width: 100%;
    margin: 20px 0 37px;
    border: 1px solid #d3d3d3;
    background-color: #f5f5f5;
    // 向前向后按钮
    .roll-forward,
    .roll-back {
      position: absolute;
      top: 71px;
      width: 17px;
      height: 17px;
      background: url('~@/assets/images/home/index.png') no-repeat;
    }
    .roll-forward {
      left: 4px;
      background-position: -260px -75px;
    }
    .roll-back {
      right: 8px;
      background-position: -300px -75px;
    }
    // 滚动主体包裹
    .roll-wrap {
      position: relative;
      overflow: hidden;
      width: 645px;
      height: 184px;
      margin: 0 auto;
      ul {
        position: absolute;
        display: flex;
        justify-content: space-around;
        top: 0;
        width: 645px;
        height: 184px;
        padding-top: 28px;
        li {
          width: 118px;
          height: 150px;
          // 专辑封面
          .cover {
            position: relative;
            margin-bottom: 7px;
            cursor: pointer;
            img {
              display: block;
              width: 100px;
              height: 100px;
            }
            .msk {
              width: 118px;
              height: 100px;
              position: absolute;
              top: 0;
              left: 0;
              background-position: 0 -570px;
            }
            .icon-play {
              display: none;
              position: absolute;
              left: 72px;
              bottom: 5px;
              width: 22px;
              height: 22px;
              background-position: 0 -85px;
            }
            &:hover .icon-play {
              display: block;
            }
          }
          // 标题和作者名
          p {
            width: 104px;
            height: 18px;
            line-height: 18px;
            text-align: left;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .albumName a {
            color: black;
          }
        }
      }
    }
  }
}
